<template>
  <!-- 授权的应用 -->
  <h4 class="divider">授权的应用</h4>
  <!-- 表格 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="appName" label="应用名称" />
    <el-table-column prop="orgName" label="部门名称" />
    <el-table-column prop="provider" label="服务商" />
    <el-table-column label="操作" fixed="right">
      <template #default="scope">
        <el-button
          link
          type="text"
          size="small"
          @click="getDetailShow(scope.row.id)"
          >详情</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    class="pagination"
    small
    background
    layout="prev, pager, next"
    :total="total"
    @current-change="getList"
    v-if="total > 10"
  />
</template>

<script setup lang="jsx">
import { getAutoAppList } from "@/api/service";
import { onMounted, toRefs, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const props = defineProps();
const emit = defineEmits();
const id = route.query.id;

const state = reactive({
  tableData: [],
  total: 0,
});
const { tableData, total } = toRefs(state);

async function getList(page = 1) {
  let params = {
    current: page,
    size: 10,
  };
  let { data } = await getAutoAppList(id, params);
  state.tableData = data.list;
  state.total = data.total;
}
function getDetailShow(id) {
  localStorage.setItem("detailAppId",id);
  router.push(
    `/application/detail`
  );
}

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 10px;
}
</style>
